<%@ include file="../common/header.jsp" %>
<!-- Main Content -->
<div class="content">
    <%@ include file="../common/top_nav.jsp" %>

    <div class="container mt-4">
        <h2>房产信息管理</h2>

        <!-- 新增按钮 -->
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#propertyModal"
                onclick="prepareAddProperty()">新增房产</button>

        <!-- 房产信息列表 -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>房产编号</th>
                <th>类型</th>
                <th>面积</th>
                <th>楼层</th>
                <th>楼栋号</th>
                <th>状态</th>
                <th>住户ID</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="property" items="${list}">
                <tr>
                    <td>${property.propertyNumber}</td>
                    <td>${property.type}</td>
                    <td>${property.area}</td>
                    <td>${property.floor}</td>
                    <td>${property.building}</td>
                    <td>${property.status}</td>
                    <td>${property.residentId}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#propertyModal"
                                onclick="prepareEditProperty(${property.id})">编辑</button>
                        <a href="<c:url value='/property/delete/${property.id}'/>" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 新增/编辑房产 模态框 -->
<div class="modal fade" id="propertyModal" tabindex="-1" aria-labelledby="propertyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="propertyForm" action="<c:url value='/property/add'/>" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="propertyModalLabel">房产信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" name="id"/>

                    <div class="mb-3">
                        <label for="propertyNumber" class="form-label">房产编号</label>
                        <input type="text" class="form-control" id="propertyNumber" name="propertyNumber" required>
                    </div>

                    <div class="mb-3">
                        <label for="type" class="form-label">类型</label>
                        <select class="form-select" id="type" name="type" required>
                            <option value="">请选择</option>
                            <option value="住宅">住宅</option>
                            <option value="商业">商业</option>
                        </select>
                    </div>

                    <div class="row mb-3">
                        <div class="col">
                            <label for="area" class="form-label">面积（㎡）</label>
                            <input type="number" step="0.01" class="form-control" id="area" name="area" required>
                        </div>
                        <div class="col">
                            <label for="floor" class="form-label">楼层</label>
                            <input type="number" class="form-control" id="floor" name="floor" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="building" class="form-label">楼栋号</label>
                        <input type="text" class="form-control" id="building" name="building">
                    </div>

                    <div class="mb-3">
                        <label for="residentId" class="form-label">住户ID</label>
                        <input type="number" class="form-control" id="residentId" name="residentId">
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="">请选择</option>
                            <option value="空闲">空闲</option>
                            <option value="已租">已租</option>
                            <option value="已售">已售</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>
<script>
    function prepareAddProperty() {
        document.getElementById("propertyModalLabel").innerText = "新增房产";
        document.getElementById("propertyForm").action = "<c:url value='/property/add'/>";
        document.getElementById("id").value = "";
        document.getElementById("propertyNumber").value = "";
        document.getElementById("type").value = "";
        document.getElementById("area").value = "";
        document.getElementById("floor").value = "";
        document.getElementById("building").value = "";
        document.getElementById("residentId").value = "";
        document.getElementById("status").value = "";
    }

    function prepareEditProperty(id) {
        fetch("<c:url value='/property/get/'/>" + id, {
            headers: {
                "Accept": "application/json"
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error("网络错误或服务端返回异常状态码: " + response.status);
                }
                return response.json();
            })
            .then(data => {
                document.getElementById("propertyModalLabel").innerText = "编辑房产";
                document.getElementById("propertyForm").action = "<c:url value='/property/update'/>";
                document.getElementById("id").value = data.id;
                document.getElementById("propertyNumber").value = data.propertyNumber;
                document.getElementById("type").value = data.type;
                document.getElementById("area").value = data.area;
                document.getElementById("floor").value = data.floor;
                document.getElementById("building").value = data.building;
                document.getElementById("residentId").value = data.residentId;
                document.getElementById("status").value = data.status;
            })
            .catch(error => {
                console.error("请求失败:", error);
                alert("获取房产信息失败！");
            });
    }
</script>
